<template>
  <el-affix>
    <el-row style="height: 10vh">
      <el-col :span="4" class="text-center theme-head-left">
        <img src="@/assets/logo.png" style="height: 4rem" />
      </el-col>
      <el-col :span="20">
        <el-menu
          mode="horizontal"
          class="h-100 theme-head-right"
          :router="true"
        >
          <el-menu-item index="/" class="ms-auto">回到首页</el-menu-item>
          <el-menu-item index="/login">退出登录</el-menu-item>
          <el-menu-item index="/person/info">
            <el-avatar :size="50" :src="headUrl" />
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </el-affix>
</template>

<script>
import auth from "@/tools/auth.js";
export default {
  name: "SpaceNavBar",
  data() {
    return {
      headUrl: null,
    };
  },
  mounted() {
    this.headUrl = auth.getLoginUser().headUrl;
  },
};
</script>

<!--需要声明一下style作用域。scoped表示样式只在当前组件有效-->
<style scoped>
.headImg {
  width: 3rem;
  border-radius: 50%; /*圆角 */
}

.theme-head-left {
  background-image: linear-gradient(
    to right,
    rgb(122, 238, 142) 0%,
    rgb(54, 156, 93) 46%,
    rgb(95, 172, 95) 99%
  );
  background-size: auto;
  background-position: 0% 0%;
  background-repeat: repeat;
  background-color: rgba(0, 0, 0, 0);
}
.theme-head-right {
  background-image: linear-gradient(
    to right,
    rgb(134, 240, 157) 0%,
    rgb(59, 173, 78) 46%,
    rgb(81, 194, 124) 99%
  );
  background-size: auto;
  background-position: 0% 0%;
  background-repeat: repeat;
  background-color: rgba(0, 0, 0, 0);
}

.theme-menu {
  background-image: linear-gradient(
    to bottom,
    rgb(148, 241, 179) 0%,
    rgb(56, 155, 97) 46%,
    rgb(58, 133, 77) 99%
  );
  background-size: auto;
  background-position: 0% 0%;
  background-repeat: repeat;
  background-color: rgba(0, 0, 0, 0);
}

.theme-main {
  background-image: linear-gradient(
    to right bottom,
    rgb(143, 255, 177) 0%,
    rgb(64, 207, 95) 50%,
    rgb(37, 95, 40) 99%
  );
  background-size: auto;
  background-position: 0% 0%;
  background-repeat: repeat;
  background-color: rgba(0, 0, 0, 0);
}
</style>
